<template>
	<view class="detail">
		<u-navbar :is-back="true" :border-bottom="false" back-icon-color="#444444">
			<view class="slot-wrap">
				<view class="nav_center single-omit">
					<text>志愿活动报名</text>
				</view>
			</view>
			<view class="navbar-right" slot="right">
				<u-icon name="share" :size="30" @click="share"></u-icon>
			</view>
		</u-navbar>
		<view class="active-info">
			<u-image width="100%" height="360rpx" src="https://hxzj.teetron.com.cn/file/img/2020/12/30/IMG202012301134455276.png"></u-image>
			<view class="main-info">
				<view class="title-box">
					<text class="title">北京市龙腾社区举办社区志愿者活动报名</text>
					<u-tag text="未开始" shape="circle" :type="'info'" />
				</view>
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconfuwuleibie"></text>
						<text class="label-text">服务类别：</text>
					</view>
					<view class="info-value">
						<u-tag text="科学种田" shape="circle" />
						<u-tag text="特困群体" shape="circle" />
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconmianxiangrenqun"></text>
						<text class="label-text">面向人群：</text>
					</view>
					<view class="info-value">
						<text class="custom-tag">#残障人士</text>
						<text class="custom-tag">#优抚对象</text>
						<text class="custom-tag">#特困群体</text>
						<text class="custom-tag">#青少年</text>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconzhaomuriqi"></text>
						<text class="label-text">招募日期：</text>
					</view>
					<view class="info-value">
						<text class="time">2020.10.21-2020.10.22</text>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconzhaomuriqi"></text>
						<text class="label-text">活动日期：</text>
					</view>
					<view class="info-value">
						<text class="time">2020.10.21-2020.10.22</text>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconriqi"></text>
						<text class="label-text">是否签到：</text>
					</view>
					<view class="info-value">
						<text class="text">是</text>
					</view>
				</view>
			</view>
			<view class="sub-info">
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconriqi"></text>
						<text class="label-text">最大服务时长数：</text>
					</view>
					<view class="info-value">
						<text class="text">4小时/天/人</text>
					</view>
				</view>
				<view class="info-item" :style="{background: organizationBgColor}" @touchstart="organizationBgColor='#f7f8f9'"
				 @touchend="organizationBgColor='#fff'">
					<view class="info-label">
						<text class="iconfont iconfaqizuzhi"></text>
						<text class="label-text">发起组织：</text>
					</view>
					<view class="info-value">
						<text class="text">北京国际志愿者服务队</text>
						<u-icon name="arrow-right" size="28" color="#AAAAAA"></u-icon>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconlianxiren"></text>
						<text class="label-text">联系人：</text>
					</view>
					<view class="info-value">
						<text class="text">张青 13772727178</text>
					</view>
				</view>
				<view class="info-item" :style="{background: addrBgColor}" @touchstart="addrBgColor='#f7f8f9'" @touchend="addrBgColor='#fff'">
					<view class="info-label">
						<text class="iconfont iconhuodongdidian"></text>
						<text class="label-text">活动地点：</text>
					</view>
					<view class="info-value">
						<text class="text">西城区幸福街道202号幸福体育馆</text>
						<u-icon name="arrow-right" size="28" color="#AAAAAA"></u-icon>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconzhiyuanbaozhang"></text>
						<text class="label-text">志愿保障：</text>
					</view>
					<view class="info-value">
						<text class="text">保险/餐饮</text>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">
						<text class="iconfont iconjifenjiangli"></text>
						<text class="label-text">积分奖励：</text>
					</view>
					<view class="info-value">
						<text class="text">40积分</text>
					</view>
				</view>
			</view>
			<view class="active-desc">
				<view class="title-box">
					<text class="title">活动描述</text>
				</view>
				<text class="content">构建特色德育顶层架构。按“整体设计、分步实施、项目引领、重点突破”思路，以项目为抓手，以社会主义核心价值观为引领，把小学、初中、高中三个学段与学校、家庭、社区三个系统整体考虑，深植具有典型区域文化特征的“贤文化”教育理念，建立并完善各学段纵向衔接、各项目横向融通、校内外深度融合。</text>
			</view>
			<view class="already-sign">
				<view class="title-box">
					<text class="title">已报名志愿者</text>
					<view class="right">
						<text class="text">10/200</text>
						<u-icon name="arrow-right" size="28" color="#AAAAAA"></u-icon>
					</view>
				</view>
				<view class="img-box">
					<u-image width="100rpx" height="100rpx" src="https://hxzj.teetron.com.cn/file/img/2020/12/30/IMG202012301134455276.png"></u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				organizationBgColor: "#fff",
				addrBgColor: "#fff",
			}
		},
		methods: {
			share() {

			}
		}
	}
</script>

<style>
	page {
		background: #F4F5F6;
	}
</style>
<style lang="scss" scoped>
	@import "@/commom/styles/icons.css";

	.detail {
		/deep/.u-slot-content {
			display: flex;
			justify-content: center;

			.slot-wrap {
				max-width: 600rpx;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 88rpx;
				color: #333333;
			}
		}

		.navbar-right {
			margin-right: 30rpx;
		}

		>.active-info {
			>.main-info {
				padding: 20rpx 0 20rpx 0;
				background: #fff;

				>.title-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;
					padding: 0 13rpx 0 24rpx;

					>.title {
						font-size: 28rpx;
						font-weight: bold;
					}

					/deep/ .u-tag {
						border: none !important;
						color: #fff;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 22rpx;
					}

					/deep/ .u-mode-light-info {
						background: #B1B1B1;
					}
				}
			}

			.info-item {
				display: flex;
				align-items: center;
				padding: 8rpx 13rpx 8rpx 24rpx;

				>.info-label {
					display: flex;
					align-items: center;
					height: 40rpx;
					line-height: 40rpx;

					>.iconfont {
						width: 20rpx;
						height: 20rpx;
						text-align: center;
						line-height: 20rpx;
						font-size: 26rpx;
						color: #AAAAAA;
					}

					.iconfuwuleibie {
						font-size: 30rpx;
					}

					.iconmianxiangrenqun {
						/* #ifdef H5 */
						font-size: 18rpx;
						/* #endif */
						/* #ifdef APP-PLUS */
						font-size: 22rpx;
						/* #endif */
					}

					.iconfaqizuzhi,
					.iconlianxiren,
					.iconzhiyuanbaozhang {
						font-size: 28rpx;
					}

					.iconhuodongdidian {
						font-size: 30rpx;
					}

					.iconjifenjiangli {
						font-size: 24rpx;
					}

					>.label-text {
						margin-left: 20rpx;
						font-size: 26rpx;
						color: #333333;
					}
				}

				>.info-value {
					position: relative;
					flex: 1;
					display: flex;
					align-items: center;

					/deep/ .u-shape-circle {
						margin-right: 10rpx;
						height: 40rpx;
						/* #ifdef H5 */
						line-height: 36rpx;
						/* #endif */
						/* #ifdef APP-PLUS */
						line-height: 40rpx;
						/* #endif */
						padding: 0 18rpx;
						border-color: #EB4D3C;
						color: #EB4D3C;
						background: #fff;
					}

					>.custom-tag {
						margin-right: 28rpx;
						font-size: 24rpx;
						color: #EB4D3C;
						line-height: 1.5;
					}

					>.time,
					>.text {
						font-size: 26rpx;
						color: #333333;
						line-height: 1.5;
					}

					/deep/ .u-icon {
						position: absolute;
						right: 10rpx;
						/* #ifdef H5 */
						top: 6rpx;
						/* #endif */
						/* #ifdef APP-PLUS */
						top: 8rpx;
						/* #endif */
					}
				}
			}

			>.sub-info {
				margin-top: 20rpx;
				padding: 20rpx 0 20rpx 0;
				background: #fff;
			}

			@mixin with-title-box {
				margin-top: 20rpx;
				padding: 24rpx;
				background: #fff;
			}

			@mixin title-box {
				>.title-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 14rpx;
					border-bottom: 2rpx solid #E1E1E1;

					>.title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}

					>.right {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: #333333;
						/* #ifdef APP-PLUS */
						line-height: 2;
						/* #endif */

						>.text {
							margin-right: 20rpx;
						}
					}
				}
			}

			>.active-desc {
				@include with-title-box;
				@include title-box;

				>.content {
					margin-top: 14rpx;
					text-indent: 52rpx;
					font-size: 26rpx;
					color: #333333;
					line-height: 1.5;
				}
			}

			>.already-sign {
				@include with-title-box;
				@include title-box;
			}
		}
	}
</style>
